<!-- directive:title 提示信息展示样式 -->
<!-- directive:breadcrumb 提示信息 -->
<div class='panel-body'>
    <h4>Default</h4>
    <span uib-rating ng-model="rate" max="max" read-only="isReadonly" on-hover="hoveringOver(value)" on-leave="overStar = null" titles="['one','two','three']" aria-labelledby="default-rating"></span>
    <span class="label" ng-class="{'label-warning': percent<30, 'label-info': percent>=30 && percent<70, 'label-success': percent>=70}" ng-show="overStar && !isReadonly">{{percent}}%</span>

    <pre style="margin:15px 0;">Rate: <b>{{rate}}</b> - Readonly is: <i>{{isReadonly}}</i> - Hovering over: <b>{{overStar || "none"}}</b></pre>

    <button type="button" class="btn btn-sm btn-danger" ng-click="rate = 0" ng-disabled="isReadonly">Clear</button>
    <button type="button" class="btn btn-sm btn-default" ng-click="isReadonly = ! isReadonly">Toggle Readonly</button>
    <hr />

    <h4>Custom icons</h4>
    <div ng-init="x = 5"><span uib-rating ng-model="x" max="15" state-on="'glyphicon-ok-sign'" state-off="'glyphicon-ok-circle'" aria-labelledby="custom-icons-1"></span> <b>(<i>Rate:</i> {{x}})</b></div>
    <div ng-init="y = 2"><span uib-rating ng-model="y" rating-states="ratingStates" aria-labelledby="custom-icons-2"></span> <b>(<i>Rate:</i> {{y}})</b></div>
    <pre>
        评级指令将负责可视化星级评定栏。

        uib-rating设置
        max $  Ç  （默认值：5） -更改图标的数量。

        ng-model $  - 目前的费率。

        on-hover(value) $ - 当用户的鼠标悬停在特定图标上时调用的可选表达式。

        on-leave() $ - 当用户的鼠标完全离开控件时调用的可选表达式。

        rating-states $  （缺省：null） -限定用于所有图标属性的对象的数组。在默认模板中，stateOn＆stateOffproperty用于指定图标的类。

        read-only $ （默认值：false） -防止用户的交互。

        titles $  C  （默认：['one'，'two'，'three'，'four'，'five']`） - 一个字符串数组，用于定义所有图标的标题。

        enable-reset $  （默认值：true） -点击额定电流的图标将评级重置为0。

        state-off $  Ç  （默认值：null） -在模板中用于指定未选定图标的状态的变量。

        state-on $  Ç  （缺省：null） -在模板用于为所选图标指定状态（类，SRC等）的变量。
    </pre>
</div>

